<template>
  <span style="display: flex; align-items: center;">
    <span
      :style="{
        display: 'inline-block',
        width: '8px',
        height: '8px',
        borderRadius: '50%',
        marginRight: '6px',
        background: isEnabled ? '#30A46C' : '#AEAEAE',
      }"
    ></span>
    {{ statusLabel }}
  </span>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { $t } from '@vben/locales';

interface Props {
  status: string;
  enableValue?: string;
  disableValue?: string;
  enableLabel?: string;
  disableLabel?: string;
}

const props = withDefaults(defineProps<Props>(), {
  enableValue: 'enable',
  disableValue: 'disable',
  enableLabel: '',
  disableLabel: '',
});

// 判断是否为启用状态
const isEnabled = computed(() => props.status === props.enableValue);

// 状态标签
const statusLabel = computed(() => {
  if (isEnabled.value) {
    return props.enableLabel || $t('system.role.enable');
  } else {
    return props.disableLabel || $t('system.role.disable');
  }
});
</script>

<style scoped>
/* 可以在这里添加组件特定的样式 */
</style>
